import { Descriptions } from 'antd';
import { useMemo } from 'react';
import { DetailType } from '.';
const OwnTable: React.FC<DetailType> = (props) => {
  const selfData = useMemo(() => {
    return { ...props.self };
  }, [props.self]);

  return (
    <div className="ym-descr-less">
      <Descriptions
        title={false}
        layout="vertical"
        bordered
        style={{ padding: '16px 0' }}
        size="small"
        column={selfData.factorList.length + 2}
      >
        <Descriptions.Item label="">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-s" style={{ minWidth: 60 }}>
              数值
            </div>
            <div className="ym-desc-itemson ym-desc-item-end" style={{ minWidth: 60 }}>
              得分
            </div>
          </div>
        </Descriptions.Item>
        {selfData.factorList.map((item, index) => {
          return (
            <Descriptions.Item label={`${item.factorName}(${item.maxScore})`} key={index}>
              <div className="ym-desc-item max-item">
                <div className="ym-desc-itemson ym-desc-item-s">{item.value}</div>
                <div className="ym-desc-itemson ym-desc-item-end">{item.score}</div>
              </div>
            </Descriptions.Item>
          );
        })}
        <Descriptions.Item label="合计">
          <div className="ym-desc-item">
            <div className="ym-desc-itemson ym-desc-item-s">--</div>
            <div className="ym-desc-itemson ym-desc-item-end lingt_text">{selfData.totalScore || 0}</div>
          </div>
        </Descriptions.Item>
      </Descriptions>
    </div>
  );
};
export default OwnTable;
